<div v-bind:class="[componentId, 'clyd-widget']">
    <div class="bu-level">
        <div class="bu-level-left bu-is-flex-shrink-1" style="min-width: 0">
            <clyd-widget-title class="bu-level-item" :title="title"></clyd-widget-title>
        </div>
        <div class="bu-level-right">
            <slot name="action"></slot>
        </div>
    </div>

    <clyd-primary-legend :apps="data.apps" :show-period="false"></clyd-primary-legend>

    <div class="clyd-widget__content" v-loading="loading">
        <template v-if="!loading">
            <times-of-day-scatter-chart :series="series" :maxSeriesValue="maxSeriesValue" :show-zoom="false" :show-toggle="false" height="auto" :showDownload="false" skin="full"></times-of-day-scatter-chart>
        </template>
    </div>
</div>